<template>
  <el-dialog :title="title"
             :visible="visible"
             :width="dialogWidth"
             class="dialog-box"
             :before-close="handleClose"
             :close-on-click-modal="false">
    <template>
      <span v-if="!stopLoop"
            class="warning-item">
        <img class="execute-gif"
             :src="executeGif">
        {{ progressContent }}
      </span>
      <span v-if="stopLoop"
            class="warning-item">
        <img class="warning-img"
             :src="warning">
        {{ tipContent }}
      </span>
    </template>
    <div v-if="stopLoop"
         slot="footer"
         class="dialog-footer">
      <el-button @click="handleCancel">我知道了</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { DialogBatchRegistrar } from "@tablra"
import BatchMixin from '../mixins/batch.mixin'

export default {
  name: "TableBatchSet",
  mixins: [BatchMixin],
  data () {
    return {
      // visible: false,
      stopLoop: false,
      idCountExceeded: 0,
      name: null,
      timer: null,
      // fulfill: {},
      component: {}
    }
  },
  computed: {
    title () {
      return this.component?.title || "提示";
    },
    dialogWidth () {
      return this.component?.width || "420px";
    },
    // idCountExceeded () {
    //   return this.fulfill?.count || 0
    // },
    // name () {
    //   return this.fulfill?.name || null
    // },
  },
  watch: {
    visible () {
      this.stopLoop = false
      this.result = {}
      // this.taskId = null
    }
  },
  created () {
    DialogBatchRegistrar.register(this)
    // Dialog.register(this)
  },
  beforeDestroy () {
    this.$once("hook:beforeDestroy", () => clearInterval(this.timer));
  },
  methods: {
    mount (component) {
      const { fulfill } = component
      this.idCountExceeded = fulfill?.count
      this.name = fulfill?.name
      this.visible = !this.visible
      this.procedure(fulfill?.taskUrl, fulfill?.id)
    },
    handleClose () {
      if (this.stopLoop) {
        this.timer = setTimeout(() => {
          this.stopLoop = true
        }, 0);
        this.visible = false;
        this.$emit("refresh");
        return;
      }
      this.stopLoop = true;
      // this.visible = false;
    },
    handleCancel () {
      this.timer = setTimeout(() => {
        this.stopLoop = true
      }, 0);
      this.visible = false
      this.$emit("refresh");
      // this.$table.search();
    }
  },
}
</script>

<style scoped>
.dialog-box {
  font-size: 16px;
  display: flex;
  align-items: center;
  /* margin-top: 0 !important; */
}

.dialog-box >>> .el-dialog {
  margin-top: 0 !important;
}

.dialog-box >>> .el-dialog__header {
  padding: 10px 15px 10px;
  background: #ffffff;
}
.dialog-box >>> .el-dialog__headerbtn {
  top: 14px;
}
.dialog-box {
  text-align: left;
}

.dialog-box >>> .el-dialog__body {
  padding: 10px 15px;
  /* font-size: 16pc; */
}
.dialog-box >>> .el-dialog__footer {
  padding: 5px 15px 15px;
}

.loading-box {
  width: 20px;
  height: 20px;
}
/* .loading-box >>> .el-loading-spinner .circular {
  width: 20px !important;
  height: 20px !important;
} */
.loading-box >>> .el-loading-spinner {
  top: 100% !important;
  /* margin-right: 5px; */
}
.loading-txt {
  padding-left: 5px;
}
.warning-item {
  line-height: 20px;
  display: flex;
  align-items: center;
}
.warning-item .warning-img {
  width: 48px;
  height: 48px;
  /* font-size: 50px; */
  color: #e6a23c;
  padding-right: 20px;
}
.execute-gif {
  width: 48px;
  height: 48px;
  padding-right: 15px;
}
.dialog-footer {
  text-align: right;
}
</style>